<template>
  <div class="score-main">
    <div class="recommend-main">
      <div class="recommends">
        <v-touch class="recommend" :class="active?'active':''" v-for="(item,index) in recommendList" :key="index"
          @tap="picbookTouch(item)" :style="recommentStyle(item)">
        </v-touch>
      </div>
      <div class="select">
        <div class="back-home" @touchend.stop="backTouch"></div>
        <div class="next" @touchend.stop="nextAssignmentTouch"></div>
      </div>
    </div>
    <LoadPicbook ref="loadPicbook" />
<!--    会员弹窗-->
    <Vip ref="vip"/>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import LoadPicbook from "../picbookList/loadPicbook.vue"
import Vip from "../common/vip.vue"
export default {
  props: ['picbookRecommend'],
  data() {
    return {
      active: true,
      recommendList: []
    }
  },
  components: {
    LoadPicbook,
    Vip
  },
  computed: {
    recommentStyle: function (item) {
      return function (item) {
        return {
          background: "url(" + item.detail.thumbnailUrl + ")0 0/100% no-repeat",
        }
      }
    },
    ...mapGetters("picbookListStatus", {
      picbookList: "getPicbookList"
    }),
    ...mapGetters("personalStatus",{
      userVip: "getUserVip"
    })
  },
  created() {
    setTimeout(() => { this.active = false }, 1000)
    for (let i = 0; i < 3; i++) {
      var num = parseInt(Math.random() * (this.picbookList.length));
      if (this.recommendList.indexOf(this.picbookList[num]) < 0) {
        this.recommendList.push(this.picbookList[num])
      } else {
        i--
      }
    }
  },
  methods: {
    backTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/" + this.$route.query.beforeRouter })
        }
      })
    },
    nextAssignmentTouch: function () {
      this.touchMusic()
      this.active = true
      setTimeout(() => { this.active = false }, 1000)
      this.recommendNext = []
      for (let i = 0; i < 3; i++) {
        var newNum = parseInt(Math.random() * (this.picbookList.length));
        if (this.recommendList.indexOf(this.picbookList[newNum]) < 0 && this.recommendNext.indexOf(this.picbookList[newNum]) < 0) {
          this.recommendNext[i] = this.picbookList[newNum]
        } else {
          i--
        }
      }
      this.recommendList = [...this.recommendNext]
    },
    //点击绘本
    picbookTouch: function (item) {
      this.touchMusic()
      this.setIsSeedEntery(false)

      if((item.vipFreeType === 0 || !item.vipFreeType) && !this.userVip.isVip ){
        this.$refs.vip.vipShowTouch()
        return
      } else {
        this.$refs.loadPicbook.loadPicbook({
          picbookId: item.id,
          beforeRouter: this.$route.query.beforeRouter
        })
      }

    },
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("seedActivityStatus", ["setIsSeedEntery"])
  }
};
</script>

<style scoped lang='stylus'>
@import '../../../src/common/stylus/base.styl'
.score-main
  position fixed
  width 100%
  height 100%
  z-index 99
  background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png') 0 0 / 100%, url($urlTitle + 'score/背景.png') 0 0 / 100%
  opacity 0
  animation loading-in 0.5s
  animation-fill-mode forwards
  .recommend-main
    position absolute
    $center('WHLT', 30rem, 18rem)
    background url($urlTitle + 'recommend/绘本推荐-背景.png') 0 0 / 100% no-repeat
    .recommends
      position absolute
      $center('WHLT', 26rem, 8rem)
      margin-top -5rem
      display flex
      justify-content space-around
      align-items center
      .recommend
        width 7rem
        height 7rem
      .active
        opacity 0
        transform scale(0)
        animation bounce-recCard 0.5s
        animation-fill-mode forwards
    .select
      position absolute
      $center('WHLT', 14rem, 5rem)
      margin-top 2.5rem
      .back-home
        float left
        width 6rem
        height 5rem
        background url($urlTitle + 'recommend/icon-返回主页.png') center center / contain no-repeat
      .next
        float right
        width 6rem
        height 5rem
        background url($urlTitle + 'recommend/icon-换一批.png') center center / contain no-repeat
</style>
